<script lang='ts' setup>
import { reactive,onMounted,ref, watch} from 'vue'

const state = reactive({
    tableData: [
        {}
    ]
})
const props = withDefaults(defineProps<{
    type: number
    tableData?: Array<any>
    previewInfo: Function
}>(), {
    type: 1,
    tableData: () => ([
        {
            id:1,
            name: '雁塔店',
            revenueTotal: 56456,
            debtTotal: 9854,
            debtRatio: '20%',
        }
    ]),
    previewInfo: (id: number) => {}
})



const previewInfo = (id: number):void => {
    props.previewInfo(id)
}
</script>

<template>
    <main>
        <el-table :data="props.tableData" style="width: 100%">
				<el-table-column label="门店名称" prop="name" />
				<el-table-column label="总营收" prop="revenueTotal"  />
				<el-table-column label="总负债" prop="debtTotal"  />
				<el-table-column prop="debtRatio">
					<template #header>
						<section style="display: flex; align-items: center;">
							<span>负债率</span>
							<el-tooltip  effect="dark" content="负债率 = 总负债金额 / 总消费金额" placement="right-start" >
								<svg t="1702367275758" style="transform: translateY(2px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
							</el-tooltip> 
						</section> 
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-link :underline="false" type="primary" @click="previewInfo(scope.row.id)">查看详情</el-link>
					</template>
				</el-table-column>
			</el-table>
    </main>
</template>

<style lang='scss' scoped>

</style>